<template>
  <div class="temp">
    <!-- 示例组件 -->
    <div class="time">组件初始化于：{{now | date('YYYY-MM-DD HH:mm:ss')}}</div>
    <a-card title="测试网络请求" class="hitokoto" v-if="hitokoto.hitokoto">
      <a-icon @click="getHitokoto" type="sync" slot="extra" />
      <div>
        <div class="msg">{{hitokoto.hitokoto}}</div>
        <div class="footer">———— {{hitokoto.from}}</div>
      </div>
    </a-card>

  </div>
</template>

<script>
  import hitokoto from '@/service/hitokoto'
  import {msg} from '@MIXIN'
  import moment from 'moment'
  export default {
    name: 'Temp',
    mixins: [msg],
    data () {
      return {
        now: Date.now(),
        hitokoto: {}
      }
    },
    methods: {
      getHitokoto () {
        hitokoto.getHitokoto('a')
          .then(res => {
            this.hitokoto = res.data
            this.$notify.success({
              message: '刷新成功！'
            })
          })
          .catch(e => {
            e !== 'processed' && console.log(e)
          })
      }
    },
    created () {
      this.getHitokoto()
    },
    mounted () {
      const now = moment().format('YYYY-MM-DD HH:mm:ss')
      this.mMsg(`组件初始化于${now}`)
        .then(() => {
          this.$message.success('您点击了确定')
        })
        .catch(e => {
          e !== 'processed' && console.log(e)
        })
    }
  }
</script>

<style scoped lang="scss">
  .temp{
    text-align: center;
    font-size: $font-size-large;
    .time{
      font-size: $font-size-smaller;
      text-align: center;
    }
    .hitokoto{
      margin: 10px auto;
      width: 60vw;
      .footer{
        margin-top: 10px;
        text-align: right;
      }
    }
    .fresh{
      margin-top: 10px;
    }
  }
</style>
